<template>
    <div class="box">
        <header class="header">
            <van-nav-bar title="提交订单" left-arrow @click-left="$router.back()" />
        </header>
        <div class="content">
            <div>
                <van-cell-group>
                    <!-- <van-cell title="李白" value="默认" label="宇宙市地球村" />
                    <van-cell @click="change" title="添加新收货人" value="新增" label="添加新收货地址" /> -->
                    <!-- <van-cell @click="change" v-if="flag" :title="name + ' ' + tel" size="large" is-link
                        :label="showAddress" /> -->
                    <van-cell v-if="flag" @click="change" :title="name + '  ' + tel" size="large"
                        :label="province + city + county + addressDetail" />
                    <van-cell v-else @click="change" title="请添加收货人信息" size="large" is-link />
                </van-cell-group>
            </div>
            <div v-for="item in orderlist" :key="item.cartid">
                <van-card :num="item.num" :price="item.originprice * item.num" :title="item.proname" :thumb="item.img1">
                    <template #num>
                        <van-stepper @change="UpCart(item.cartid, item.num)" v-model="item.num" theme="round"
                            button-size="22" />
                    </template>
                </van-card>
            </div>
            <van-submit-bar :price="Allprice" button-text="免密支付" @submit="onSubmit">
            </van-submit-bar>
        </div>
    </div>
</template>
<script>
import Vue from 'vue';
import { SubmitBar, Cell, CellGroup, Dialog } from 'vant';

import { confirmOrder } from '@/api/order'
import { Updatenum, DeleteCartItem } from '@/api/cart'

Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(SubmitBar);
Vue.use(Dialog);


export default {
    data() {
        return {
            orderlist: [],
            flag: false,
            // 收货地址
            str: '',
            // 名字
            name: '',
            tel: '',
            province: '',
            city: '',
            county: '',
            addressDetail: '',
        }
    },
    computed: {
        // 总价
        Allprice() {
            if (this.orderlist == undefined) {
            } else {
                return this.orderlist.reduce((sum, item) =>
                    sum += item.num * item.originprice, 0) * 100
            }
        }
    },
    mounted() {
        console.log(this.$route.params.time);
        console.log(localStorage.getItem('userid'));
        // 获取确认订单的信息
        confirmOrder({
            userid: localStorage.getItem('userid'),
            time: this.$route.params.time,
        }).then(res => {
            this.orderlist = res.data
            console.log(res);

            this.flag = res.flag
            this.name = res.address.name
            console.log(this.name);
            console.log(this.flag);
            // // 收货人信息
            this.tel = res.address.tel
            console.log(this.tel);
            this.province = res.address.province
            this.city = res.address.city
            this.county = res.address.county
            this.addressDetail = res.address.addressDetail
        })
    },
    methods: {
        onSubmit() {
            Dialog.alert({
                message: '支付成功',
            }).then(() => {
                this.$router.push('/cart')
            })
                .catch(() => {
                    this.$router.push('/home')
                });
            DeleteCartItem({
                userid: localStorage.getItem('userid'),
            }).then(res => {
                console.log(res);
            })
        },
        UpCart(cartid, num) {
            Updatenum({ cartid, num })
                .then()
            // console.log(cartid, num);
        },
        // 收货地址列表
        change() {
            this.$router.push('/addlist/' + this.$route.params.time)
        },

    },
}

</script>
<style>
.van-card {
    margin-bottom: 16px;
}

.content {
    padding-bottom: 50px;
}
</style>